<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>所有酒店</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://campaign.huazhu.com/cdn/huazhuresource/newweb/hotels/css/main.2ecaffe7.css">
    <script src="../tool/city.js"></script>
    <link rel="stylesheet" href="../tool/css/common.css">
    <script src="../tool/js/date1.js"></script>
    <script src="../tool/js/iscroll.js"></script>
    <script src="../tool/rolldate.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function(){
        $('#beginTime').date();
        $('#endTime').date({theme:"datetime"});
    });
</script>
<div class="head" style="background-image: url(../img/bg_header_index_top.png); height: 50px">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">此处是logo</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" style="margin-right: 2px">
                <li><a href="#">首页</a></li>
                <li class="active"><a href="allhotel.html">国内酒店</a></li>
                <li><a href="#">国外酒店</a></li>
                <li><a href="#">特卖专区</a></li>
                <li><a href="index.html">旗下品牌</a></li>
                <li><a href="#">华住会</a></li>
                <li><a href="#">华住商旅</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li style="margin-right: 30px;margin-top: 10px">
                    <button type="button" class="btn btn-primary small " style=";height: 30px;width:70px" onclick="loginSys()">登录</button>
                </li>
                <li style="margin-right: 30px;margin-top: 10px">
                    <button type="button" class="btn btn-default small active" style=";height: 30px;width:70px">注册
                    </button>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    $.ajax({
        url:'http://localhost:8888/getuser',
        success:function(res){
            if(res.length>0){
                console.log(res[0].userName)
                $(".navbar-nav").eq(1).html("<li style=\"margin-right: 30px;margin-top: 10px\">\n" +
                    "                    <div style=\";height: 30px;width:70px;font-size: 14px;cursor: pointer\" title='点击进入个人中心' onclick='personcenter()'>"+res[0].userName+"</div>\n" +
                    "                </li>\n")
            }
            else {
                $(".navbar-nav").eq(1).html(" <li style=\"margin-right: 30px;margin-top: 10px\">\n" +
                    "                    <button type=\"button\" class=\"btn btn-primary small \" style=\";height: 30px;width:70px\" onclick=\"loginSys()\">登录</button>\n" +
                    "                </li>\n" +
                    "                <li style=\"margin-right: 30px;margin-top: 10px\">\n" +
                    "                    <button type=\"button\" class=\"btn btn-default small active\" style=\";height: 30px;width:70px\">注册\n" +
                    "                    </button>\n" +
                    "                </li>")
            }
        }
    })
    function personcenter() {
        $.ajax({
            url:"http://localhost:8888/recentHtmlPage",
            data:"htmlPage="+window.location.href,

            success:function (data) {
                alert("11")
            }
        })
        window.location.href="http://localhost:8080/user/getuserinfo"
    }
    function loginSys() {
        // alert(1)
        $.ajax({
            url:"http://localhost:8888/recentHtmlPage",
            data:"htmlPage="+window.location.href,
            success:function (data) {
                alert("11")
            }
        })
        window.location.href="http://localhost:8080/login"

    }


</script>
<div style="margin-left:5%;width:90%;height: 60px;padding-top: 20px;border-bottom: 1px solid #eeeae9;
">
    <tr class="navigation" style="color: #666666;font-size: small">
        <a href="index.html" style="text-decoration: none;">
            <td><span style="font-size:small;color: #666666">首页</span>&nbsp;&nbsp;&nbsp;&nbsp;></td>
        </a>
        <a href="index.html" style="text-decoration: none;">
            <td>&nbsp;<span style="font-size:small;color: #666666">&nbsp;&nbsp;&nbsp;酒店&nbsp;&nbsp;&nbsp;&nbsp;></span>
            </td>
        </a>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-size:small;color: #666666" id="localname">酒店预订</span></td>
    </tr>
</div>
<div style="background-color: #F7F6F5;width: 90%;margin-left: 5%;height: 50px;">
    <div style="line-height: 50px;margin-left: 1%;float: left;">城市：
        <input type="text" placeholder="请输入要预订酒店的城市" style="height: 30px;width: 60%" id="city" value="上海市"/>
    </div>

    <div style="line-height: 50px;margin-left: 3%;float: left">入住日期：
        <input readonly type="text" id="date-group1-1" placeholder="YYYY-MM-DD" style="width: 50%;height: 30px;"/>
    </div>

    <div style="line-height: 50px;margin-left: 3%;float:left;">退房日期：
        <input readonly type="text" id="date-group1-2" placeholder="YYYY-MM-DD" style="width: 50%;height: 30px;"/>
    </div>

<!--    <div style="line-height: 50px;margin-left: 3%;float:left;" >关键字：-->
<!--        <input type="text" value="" name="keywords" style="height: 30px;width: 70%" placeholder="酒店地址/品牌/名称等信息">-->
<!--    </div>-->

<!--    <div style="line-height: 50px;margin-left: 6%;float:left;width: 15%">-->
<!--        <button type="button" class="btn btn-primary small " style=";height: 30px;background: #7F1F59;width: 60%" onclick="searchHotelByKeyWords()">搜索-->
<!--        </button>-->
<!--    </div>-->
</div>

<div style="margin-top: 10px;margin-left: 5%;width: 90%;border-bottom: 1px solid #eeeae9">
    <div style="height: 100%;width: 15%;text-align: left;float: left;font-size: 20px;margin-top: 10px">位置<span
            style="font-size: 10px;color: #7F1F59">&nbsp;&nbsp;&nbsp;&nbsp;不限</span></div>
    <div style="float: left;width: 85%;margin-top: 10px">
        <div class="table-responsive">
            <table class="table" id="locate">
                <tr>
                    <td><input type="checkbox" value="黄浦区" style="width: 11%" name='locate'>黄浦区</td>
                    <td><input type="checkbox" value="卢湾区" style="width: 11%" name='locate'>卢湾区</td>
                    <td><input type="checkbox" value="徐汇区" style="width: 11%" name='locate'>徐汇区</td>
                    <td><input type="checkbox" value="长宁区" style="width: 11%" name='locate'>长宁区</td>
                    <td><input type="checkbox" value="静安区" style="width: 11%" name='locate'>静安区</td>
                    <td><input type="checkbox" value="普陀区" style="width: 11%" name='locate'>普陀区</td>
                    <td><input type="checkbox" value="闸北区" style="width: 11%" name='locate'>闸北区</td>
                    <td><input type="checkbox" value="虹口区" style="width: 11%" name='locate'> 虹口区</td>
                    <td><input type="checkbox" value="杨浦区" style="width: 11%" name='locate'>杨浦区</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="闵行区" style="width: 11%" name='locate'>闵行区</td>
                    <td><input type="checkbox" value="宝山区" style="width: 11%" name='locate'>宝山区</td>
                    <td><input type="checkbox" value="嘉定区" style="width: 11%" name='locate'>嘉定区</td>
                    <td><input type="checkbox" value="浦东新区" style="width: 11%" name='locate'>浦东新区</td>
                    <td><input type="checkbox" value="金山区" style="width: 11%" name='locate'>金山区</td>
                    <td><input type="checkbox" value="松江区" style="width: 11%" name='locate'>松江区</td>
                    <td><input type="checkbox" value="青浦区" style="width: 11%" name='locate'>青浦区</td>
                    <td><input type="checkbox" value="南汇区" style="width: 11%" name='locate'>南汇区</td>
                    <td><input type="checkbox" value="奉贤区" style="width: 11%" name='locate'>奉贤区</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="崇明县" style="width: 11%" name='locate'>崇明县</td>
                    <td><input type="checkbox" value="成桥镇" style="width: 11%" name='locate'>成桥镇</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div style="margin-top: 10px;margin-left: 5%;width: 90%;">
    <div style="height: 100%;width: 15%;text-align: left;float: left;font-size: 20px;margin-top: 10px">品牌<span
            style="font-size: 10px;color: #7F1F59">&nbsp;&nbsp;&nbsp;&nbsp;不限</span></div>
    <div style="float: left;width: 85%;margin-top: 10px">
        <div class="table-responsive">
            <table class="table" id="brand">
                <tr>
                    <td><input type="checkbox" value="美爵" style="width: 11%" name="brand">美&nbsp;爵</td>
                    <td><input type="checkbox" value="禧玥" style="width: 11%" name="brand">禧&nbsp;玥</td>
                    <td><input type="checkbox" value="漫心" style="width: 11%" name="brand">漫&nbsp;心</td>
                    <td><input type="checkbox" value="诺富特" style="width: 11%" name="brand">诺富特</td>
                    <td><input type="checkbox" value="美居" style="width: 11%" name="brand">美&nbsp;居</td>
                    <td><input type="checkbox" value="CitiGO" style="width: 11%" name="brand">CitiGO</td>
                    <td><input type="checkbox" value="桔子" style="width: 11%" name="brand">桔&nbsp;子</td>
                    <td><input type="checkbox" value="全季" style="width: 11%" name="brand">全&nbsp;季</td>
                    <td><input type="checkbox" value="星辰" style="width: 11%" name="brand">星&nbsp;辰</td>
                </tr>
                <tr>
                    <td><input type="checkbox" value="宜必思尚品" style="width: 11%" name="brand">宜必思尚品</td>
                    <td><input type="checkbox" value="宜必思" style="width: 11%" name="brand">宜必思</td>
                    <td><input type="checkbox" value="海友" style="width: 11%" name="brand">海&nbsp;友</td>
                    <td><input type="checkbox" value="花间堂" style="width: 11%" name="brand">花间堂</td>
                    <td><input type="checkbox" value="美伦" style="width: 11%" name="brand">美&nbsp;伦</td>
                    <td><input type="checkbox" value="桔子水晶" style="width: 11%" name="brand">桔子水晶</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div style="margin-top: 10px;margin-left: 5%;width: 90%">
    <div style="height: 100%;width: 15%;text-align: left;float: left;font-size: 20px;margin-top: 10px">最低价格<span
            style="font-size: 10px;color: #7F1F59">&nbsp;&nbsp;&nbsp;&nbsp;不限</span></div>
    <div style="float: left;width: 85%;;margin-top: 10px">
        <div class="table-responsive">
            <table class="table">
                <tr id="price">
                    <td><input type="checkbox" value="A" style="width: 11%" name='price'>0-399</td>
                    <td><input type="checkbox" value="B" style="width: 11%" name='price'>400-699</td>
                    <td><input type="checkbox" value="C" style="width: 11%" name='price'>700-999</td>
                    <td><input type="checkbox" value="D" style="width: 11%" name='price'>1000-1499</td>
                    <td><input type="checkbox" value="E" style="width: 11%" name='price'>其他</td>
                </tr>

            </table>
        </div>
    </div>
</div>

<div style="margin-top: 10px;margin-left: 5%;width: 90%">
    <div style="height: 100%;width: 15%;text-align: left;float: left;font-size: 20px;margin-top: 10px">设施与服务<span
            style="font-size: 10px;color: #7F1F59">&nbsp;&nbsp;&nbsp;&nbsp;不限</span></div>
    <div style="float: left;width: 85%;;margin-top: 10px">
        <div class="table-responsive">
            <table class="table">
                <tr id="service">
                    <td><input type="checkbox" value="停车场" style="width: 11%" name='service'>停车场</td>
                    <td><input type="checkbox" value="会议室" style="width: 11%" name='service'>会议室</td>
                    <td><input type="checkbox" value="餐厅" style="width: 11%" name='service'>餐厅</td>
                    <td><input type="checkbox" value="游泳池" style="width: 11%" name='service'>游泳池</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div style="width: 63%;margin-left: 5%" id="zcj">
    <div>按照您的要求找到<span id="hotelnum" style="color: #7F1F59;font-size: 20px">11</span>家酒店</div>
    <div style="width: 100%;border: 1px solid #eeeae9;height: 40px;" id="orderBy">
        <div style="float: left;margin-right: 30px;cursor: pointer;line-height: 38px;margin-left: 3%;color: #7F1F59;font-family: 微软雅黑">
            默认排序
        </div>
        <div style="float: left;margin-right: 30px;cursor: pointer;line-height: 38px;font-family: 微软雅黑">价格</div>
        <div style="float: left;margin-right: 30px;cursor: pointer;line-height: 38px;font-family: 微软雅黑;">评分</div>
    </div>
</div>
<script>
    var condition = "默认排序";
    $("#orderBy").find("div").click(function () {
        $("#orderBy").find("div").each(function () {
            $(this).css('color','black')
        })
        $(this).css('color','#7F1F59')
          condition =  $(this).text()
        $.ajax({
            url:"http://localhost:8888/allHotel",
            data:"locate=" + locatechecked + "&brand=" + brandchecked +"&price=" + pricechecked + "&service=" + servicechecked + "&pageNum=" + pagenum+ "&condition="  + condition,
            success:function (data) {
                console.log(data)
                if(data[0]){
                    $("#hotelnum").text(data[0].count)
                    // $(".pagination-lg").html(pageNum(data[0].count))

                }
                else {
                    $("#hotelnum").text(0)
                    $(".pagination-lg").html(0)

                }            if(data.length == 0){
                    $("#test").html("<div style=\"width: 63%;margin-left: 5%;margin-top: 20px\">抱歉，没有符合要求的酒店!</div>")
                    return;
                }
                var html = "";
                // console.log(data)
                for(var i = 0;i < data.length;i++){
                    html = html + "<div style=\"width: 63%;margin-left: 5%;border: 1px solid #eeeae9;margin-top: 10px;height: 200px;float: left;\"\n" +
                        "     class=\"hotel\">\n" +
                        "    <div style=\"width: 76%;float:left;border-right: 1px dashed black;height: 160px;margin-top: 20px\">\n" +
                        "        <div style=\"width: 28%;height: 180px;margin-left: 3%;border-right: 10px;float: left\">\n" +
                        "            <img src='"+data[i].hotelImgUrl+"' alt=\"zcj\" width=\"100%\" height=\"160px\">\n" +
                        "        </div>\n" +
                        "        <div style=\"float: left;margin-left: 3%\">\n" +
                        "            <div style=\"font-size: 18px;color: #7F1F59;margin-top: 10px\">"+data[i].hotelName+"</div>\n" +
                        "            <div style=\"margin-top: 10px;font-size: 14px\">"+data[i].hotelLocate+"</div>\n" +
                        "        </div>\n" +
                        "        <div style=\"float: right;margin-right: 5%;margin-top:130px\"><img src=\"../img/已收藏.png\"\n" +
                        "                                                                         width=\"20px\">收藏<span>41</span></div>\n" +
                        "    </div>\n" +
                        "    <div style=\"width: 24%;float: right\">\n" +
                        "        <div style=\"margin-left: 50%;margin-top: 20px\"><span style=\"font-size: 25px;color: darkorange\">￥"+ data[i].hotelMinimumCharge +"</span>&nbsp;起\n" +
                        "        </div>\n" +
                        "        <div style=\"margin-left: 13%;\">\n" +
                        "            <span>\n" +
                        score2(data[i].hotelScore)   +

                        "            </span>\n" +
                        "            <span>\n" +
                        "                "+ data[i].hotelScore+"\n" +
                        "            </span>/5\n" +
                        "        </div>\n" +
                        "        <div style=\"margin-left: 50%;margin-top: 30%;color:#651C4D;border: 1px solid #651C4D;height: 27px;text-align: center;width: 35%;border-radius: 3px;cursor: pointer\">\n" +
                        "            <span style=\"line-height: 27px\" onclick='getHotelInfoByhotelName(this)'>查看详情</span>\n" +
                        "        </div>\n" +
                        "    </div>\n" +
                        "</div>"
                }
                $("#test").html(html);
                test()

            }
        })
    })
</script>
<div style="width: 100%" id="test">
    <div style="width: 63%;margin-left: 5%;margin-top: 20px">抱歉，没有符合要求的酒店!</div>
</div>


<div style="width: 26%;margin-left: 69%;border: 1px solid #eeeae9;height: 500px" id="hotellocatemap">

    <!--    <iframe src=../tool/mapall.html?add="北京天安门" width="100%" height="500"-->
    <!--            frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes">-->
    <!--    </iframe>-->
</div>

<div style="width: 90%;float: left;margin-left: 5%;">
    <nav aria-label="Page navigation" style="text-align: center">
        <ul class="pagination pagination-lg">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

</body>
</html>
<script src="../js/allHotelJS/JS.js"></script>
<script>
    $(window).scroll(function (e) {
        var $el = $('#hotellocatemap');
        var isPositionFixed = ($el.css('position') == 'fixed');
        if ($(this).scrollTop() > 500 && !isPositionFixed) {
            $el.css({'position': 'fixed', 'top': '0px'});
        }
        if ($(this).scrollTop() < 200 && isPositionFixed) {
            $el.css({'position': 'static', 'top': '0px'});
        }
    });


</script>

<script>
    window.onload = function () {

        // 格式
        new Rolldate({
            el: '#date-group1-1',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100
        })
        new Rolldate({
            el: '#date-group1-2',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100
        })
        new Rolldate({
            el: '#date-group1-3',
            format: 'YYYY-MM-DD hh'
        })
        new Rolldate({
            el: '#date-group1-4',
            format: 'YYYY-MM-DD hh:mm',
            beginYear: 2000,
            endYear: 2100
        })
        new Rolldate({
            el: '#date-group1-5',
            format: 'YYYY-MM-DD hh:mm:ss',
            beginYear: 2000,
            endYear: 2100
        })
        new Rolldate({
            el: '#date-group1-6',
            format: 'hh:mm'
        })
        new Rolldate({
            el: '#date-group1-7',
            format: 'hh:mm:ss'
        })
        new Rolldate({
            el: '#date-group1-8',
            format: 'YYYY',
            beginYear: 2000,
            endYear: 2100
        })
        new Rolldate({
            el: '#date-group1-9',
            format: 'MM'
        })
        new Rolldate({
            el: '#date-group1-10',
            format: 'DD'
        })
        new Rolldate({
            el: '#date-group1-11',
            format: 'hh'
        })
        new Rolldate({
            el: '#date-group1-12',
            format: 'mm'
        })
        new Rolldate({
            el: '#date-group1-13',
            format: 'ss'
        })
        new Rolldate({
            el: '#date-group1-14',
            format: 'YYYY/DD'
        })
        /* 回调函数
         * tips:	在vue及其他mvvm框架中使用时，在confirm中修改v-model绑定的数据即可
         */
        new Rolldate({
            el: '#date-group2-1',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100,
            init: function () {
                console.log('插件开始触发');
            },
            moveEnd: function (scroll) {
                console.log(scroll)
                console.log('滚动结束');
            },
            confirm: function (date) {
                console.log(date)
                console.log('确定按钮触发');
            },
            cancel: function () {
                console.log('插件运行取消');
            }
        })
        new Rolldate({
            el: '#date-group2-2',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100,
            init: function () {
                if (1 == 1) {
                    console.log('阻止插件继续执行');
                    return false;
                }
            }
        })
        new Rolldate({
            el: '#date-group2-3',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100,
            confirm: function (date) {
                return date.replace(/-/g, '/');
            }
        })
        // 自定义语言
        var lang = {
            title: '自定义标题',
            cancel: '取消',
            confirm: '确认',
            year: '年',
            month: '月',
            day: '日',
            hour: '时',
            min: '分',
            sec: '秒'
        };
        // 如果某个值未修改可不传 以上同 var lang = {title:'自定义标题'} 允许传空串
        new Rolldate({
            el: '#date-group3-1',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100,
            lang: lang
        })

        // 设置默认日期 内部使用document.getElementById('date').bindDate = new Date('2019/05/13');
        new Rolldate({
            el: '#date-group4-1',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100,
            value: '2017-10-21' //或2017-10-21 23:52:50
        })

        // el传dom对象，只支持单个
        new Rolldate({
            el: document.getElementById('date-group5-1'),
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100
        })

        // 分钟按指定数分隔
        new Rolldate({
            el: '#date-group6-1',
            format: 'hh:mm',
            minStep: 5
        })
        // 使用原生click
        new Rolldate({
            el: '#date-group7-1',
            trigger: 'click'
        })

        // 其他示例
        //日期判断
        new Rolldate({
            el: '#date-group8-1',
            format: 'YYYY-MM-DD',
            beginYear: 2000,
            endYear: 2100,
            confirm: function (date) {
                var d = new Date(),
                    d1 = new Date(date.replace(/\-/g, "\/")),
                    d2 = new Date(d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()); //如果非'YYYY-MM-DD'格式，需要另做调整

                if (d1 < d2) {
                    alert('不能小于当前的日期');
                    return false;
                }
            }
        })
    }
</script>
